Material UI — More Tooltip Tricks and Typography

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize tooltips and add typography with Material UI.

Disabled Elements

If we want to show a tooltip on a disabled element, then we’ve to wrap the disabled element with a wrapper element.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <Tooltip title="disabled">
      <span>
        <Button disabled>Disabled Button</Button>
      </span>
    </Tooltip>
  );
}

We wrap the disabled button with a span so that we can see the tooltip when we hover over it.

Transitions

We can show various transitions when we show our tooltip.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";

export default function App() {
  return (
    <Tooltip
      TransitionComponent={Fade}
      TransitionProps={{ timeout: 600 }}
      title="tooltip"
    >
      <Button>Fade</Button>
    </Tooltip>
  );
}

to add a fade transition when we show or hide the tooltip.

Other effects include the zoom effect:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import Zoom from "@material-ui/core/Zoom";

export default function App() {
  return (
    <Tooltip
      TransitionComponent={Zoom}
      TransitionProps={{ timeout: 600 }}
      title="tooltip"
    >
      <Button>Fade</Button>
    </Tooltip>
  );
}

We set the TransitionProps to change the duration of the effect.

Showing and Hiding

We can also add a delay for showing and hiding the tooltip.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <Tooltip title="tooltip" enterDelay={500} leaveDelay={200}>
      <Button>button</Button>
    </Tooltip>
  );
}

We add a delay when we show the tooltip and when we hide it.

The numbers are in milliseconds.

Typography

We can change the font of our app with the Typography component.

The Roboto font isn’t automatically by Material UI.

To load it, we can add the following CSS:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

We can also install the fontsource-roboto package:

npm install fontsource-roboto

and write:

import 'fontsource-roboto';

Typography Component

We can add the Typography component to render various text styles.

For example, we can write:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="h1" component="h2" gutterBottom>
        h1.
      </Typography>
      <Typography variant="h2" gutterBottom>
        h2.
      </Typography>
      <Typography variant="h3" gutterBottom>
        h3.
      </Typography>
      <Typography variant="h4" gutterBottom>
        h4.
      </Typography>
      <Typography variant="h5" gutterBottom>
        h5.
      </Typography>
      <Typography variant="h6" gutterBottom>
        h6.
      </Typography>
    </>
  );
}

to render various headings with it.

The element we render is set in the variant prop.

gutterBottom adds some margins to the bottom.

There are also various body text styles we can render:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="subtitle1" gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
        blanditiis tenetur
      </Typography>
      <Typography variant="subtitle2" gutterBottom>
        Morbi maximus maximus nisl, in tristique augue convallis vel. Praesent
        eget scelerisque ex, a sagittis libero.
      </Typography>
      <Typography variant="body1" gutterBottom>
        Vivamus ultrices nunc a est pulvinar sodales.
      </Typography>
      <Typography variant="body2" gutterBottom>
        Proin tincidunt nunc sed orci suscipit varius. Suspendisse volutpat
        interdum iaculis.
      </Typography>
    </>
  );
}

We set the variant to subtitle1 , subtitle2 , body1 or body2 to display various body text styles.

There’re also styles for buttons, captions, and overline text:

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <>
      <Typography variant="button" display="block" gutterBottom>
        button text
      </Typography>
      <Typography variant="caption" display="block" gutterBottom>
        caption text
      </Typography>
      <Typography variant="overline" display="block" gutterBottom>
        overline text
      </Typography>
    </>
  );
}

Theme

We can use the typography key of a theme to style our text.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(1)
  }
}));

export default function App() {
  const classes = useStyles();

  return <div className={classes.root}>some div</div>;
}

We added the theme.typography.button style to our styles so that we can apply it anywhere.

Conclusion

We can tooltips anywhere.

Typography components can be added to display text.